import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num,
} from '../../actions/IndexAction'
import base from "../base"
import { AtTabs, AtTabsPane,AtTag,AtSegmentedControl} from 'taro-ui'
import './index.less'
import set from "../../apis/api"

class jz_device_list extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      current: 0,
      jz_normal_list:[],
      jz_error_list:[],
      d_sn:"",
    }
  }

  config = {
    navigationBarTitleText: '基站设备',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {


  }


  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    this.fetchData();
    console.log('props',this.props)
    wx.stopPullDownRefresh();
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    console.log("show")
    this.onPullDownRefresh()


  }

  addDevice()
  {
    Taro.navigateTo({
      url: '/pages/gypage/add_devices?id='+this.props.id+"&sn="+this.props.sn
    })
  }
  toDevice(item)
  {
    Taro.navigateTo({
      url: '/pages/gypage/device_detail?item='+JSON.stringify(item)
    })
  }
  setCurrent(val)
  {
    if(val==1&&this.state.jz_error_list.length==0)
    {
      this.getErrorDeviceList()
    }
    this.setState({
      current:val
    })
  }
  back() {
    Taro.navigateBack()
  }
  getDeviceList()
  {
    wx.showLoading({title: "加载中"})
    var databody={
      access_token:this.props.gytoken.gytoken,
      wxid:this.props.sys_config.sets.wxid,
      S_d_sn:this.props.sn
    }
    this.wx_request(set.jz_normal_list, databody,"POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data)=>
    {

      if(data.data.data.data) {
        this.setState({
          jz_normal_list: data.data.data.data
        })
      }
      console.log("=====1111",data.data.data)
      wx.hideLoading();

    }).catch((err)=>{
      wx.hideLoading();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '网络访问失败，请重试',
        icon: 'none',
        duration: 1800
      })
    })

  }
  getErrorDeviceList()
  {
    wx.showLoading({title: "加载中"})
    var databody={
      access_token:this.props.gytoken.gytoken,
      wxid:this.props.sys_config.sets.wxid,
      S_d_sn:this.props.sn
    }
    this.wx_request(set.jz_error_list, databody,"POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data)=>
    {

      if(data.data.data.data){
        this.setState({
          jz_error_list:data.data.data.data
        })
      }

      wx.hideLoading();

    }).catch((err)=>{
      wx.hideLoading();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '网络访问失败，请重试',
        icon: 'none',
        duration: 1800
      })
    })

  }
  fetchData() {
    console.log(this.props.id);
    this.setState({
      d_sn:this.props.id
    },()=>{
      this.getDeviceList();
    })

    // wx.showLoading({title: "加载中"})
    // var databody={
    //   openid:this.props.wxuser.wxuser.openid,
    //   id:this.props.id
    // }
    // this.wx_request(set.oto.getotoorder, databody,"POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data)=>
    // {
    //
    //
    //   wx.stopPullDownRefresh();
    //   wx.hideLoading();
    //
    // }).catch((err)=>{
    //   wx.hideLoading();
    //   wx.stopPullDownRefresh();
    //   wx.showToast({
    //     title: '网络访问失败，请重试',
    //     icon: 'none',
    //     duration: 1800
    //   })
    // })

  }

  componentDidHide() {
  }

  render() {
    const  {jz_normal_list,jz_error_list}=this.state;
    return (
      <View style={{flex:1,background:"#f0f2f5",minHeight:"100vh"}}>
        <View style={{display:"flex",justifyContent:"center"}}>

        <View style={{width:"90%",marginTop:"20rpx"}}>
          <AtSegmentedControl
            selectedColor='#4bb33d'
            values={[ '正常设备', '异常设备']}
            onClick={this.setCurrent.bind(this)}
            current={this.state.current}
          />
        </View>
        </View>
          <ScrollView>
            <View style={{padding:"10rpx",display:"flex",flexDirection:"column",alignItems:"center",paddingBottom:"130rpx"}}>
              {this.state.current === 0&&jz_normal_list.length>0&&jz_normal_list.map((item,key)=>{
                return( <View
                  key={key}
                  onClick={this.toDevice.bind(this,item)}
                  style={{
                    height: "180rpx",
                    background: "#ffffff",
                    borderRadius: "20rpx",
                    margin: "20rpx",
                    display: "flex",
                    width: "85vw",
                    backgroundImage: `url("http://wx.engconn.com/static/uploads/2020-01-11/634181578679245.jpg")`,
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "90px 90px",
                    backgroundPosition:"bottom right"
                  }}>
                  <View style={{width: "180rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <Image src={item.img?item.img:"../../assets/images/icon_18.png"} style={{width:"100rpx",height:"100rpx"}}/>
                  </View>

                  <View style={{flex: 1, display: "flex", flexDirection: "column", justifyContent: "center"}}>
                    <View>
                      <Text style={{fontSize: "26rpx", color: "#333333",fontWeight:"bold"}}>
                        {item.name}
                      </Text>
                    </View>
                    <View>
                      <Text style={{fontSize: "26rpx", color: "#333333"}}>
                        {item.inc_type}
                      </Text>
                    </View>
                    <View style={{marginTop: "20rpx"}}>
                      <Text style={{fontSize: "24rpx", color: "#333333"}}>
                        运行状态:
                      </Text>
                      {item.status==1?<Text style={{fontSize: "24rpx", color: "#4bb33d", marginLeft: "10rpx"}}>
                        正常运行
                      </Text>:<Text style={{fontSize: "24rpx", color: "#cc0033", marginLeft: "10rpx"}}>
                        运行异常
                      </Text>}
                    </View>
                  </View>
                </View>)
              })}

              {this.state.current === 1&&jz_error_list.length>0&&jz_error_list.map((item,key)=>{
                return( <View
                  key={key}
                  onClick={this.toDevice.bind(this,item)}
                  style={{
                    height: "180rpx",
                    background: "#ffffff",
                    borderRadius: "20rpx",
                    margin: "20rpx",
                    display: "flex",
                    width: "85vw"
                  }}>
                  <View style={{width: "180rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>
                    <Image src={item.img?item.img:"../../assets/images/icon_18.png"} style={{width:"50rpx"}} mode={"widthFix"}/>
                  </View>

                  <View style={{flex: 1, display: "flex", flexDirection: "column", justifyContent: "center"}}>
                    <View>
                      <Text style={{fontSize: "26rpx", color: "#333333",fontWeight:"bold"}}>
                        {item.name}
                      </Text>
                    </View>
                    <View>
                      <Text style={{fontSize: "26rpx", color: "#333333"}}>
                        {item.inc_type}
                      </Text>
                    </View>
                    <View style={{marginTop: "20rpx"}}>
                      <Text style={{fontSize: "24rpx", color: "#333333"}}>
                        运行状态:
                      </Text>
                      {item.status==1?<Text style={{fontSize: "24rpx", color: "#4bb33d", marginLeft: "10rpx"}}>
                        正常运行
                      </Text>:<Text style={{fontSize: "24rpx", color: "#cc0033", marginLeft: "10rpx"}}>
                        运行异常
                      </Text>}
                    </View>
                  </View>
                </View>)
              })}
              {/*<View style={{background:"#ffffff",margin:"10rpx",borderRadius:"20rpx",overflow:"hidden",padding:"10rpx",display:"flex"}}>*/}
                {/*<View style={{padding:"20rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>*/}
                  {/*<Image src={"../../assets/images/icon_18.png"} style={{width:"80rpx"}} mode={"widthFix"}/>*/}

                {/*</View>*/}
                {/*<View style={{width:"flex:1"}}>*/}

                  {/*<View style={{display:"flex",flex:1}}>*/}
                    {/*<View style={{display:"flex",flex:1,padding:"10rpx"}}>*/}
                      {/*<View style={{width:"160rpx",height:"40rpx",borderRadius:"20rpx",backgroundColor:"#ae5da0",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",flex:1}}>*/}
                        {/*<Text style={{color: "#ffffff", fontSize: "22rpx"}}>名称</Text>*/}
                      {/*</View>*/}
                      {/*<View style={{height:"40rpx",borderRadius:"20rpx",width:"60rpx",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",    paddingLeft: "20rpx",*/}
                        {/*paddingRight: "20rpx",}}>*/}
                        {/*<Text style={{color: "#333333", fontSize: "22rpx"}}>231V</Text>*/}
                      {/*</View>*/}


                    {/*</View>*/}
                    {/*<View style={{display:"flex",flex:1,padding:"10rpx"}}>*/}
                      {/*<View style={{width:"160rpx",height:"40rpx",borderRadius:"20rpx",backgroundColor:"#ae5da0",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",flex:1}}>*/}
                        {/*<Text style={{color: "#ffffff", fontSize: "22rpx"}}>类型</Text>*/}
                      {/*</View>*/}
                      {/*<View style={{height:"40rpx",borderRadius:"20rpx",width:"60rpx",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",    paddingLeft: "20rpx",*/}
                        {/*paddingRight: "20rpx",}}>*/}
                        {/*<Text style={{color: "#333333", fontSize: "22rpx"}}>231V</Text>*/}
                      {/*</View>*/}


                    {/*</View>*/}
                  {/*</View>*/}
                  {/*<View style={{display:"flex",flex:1}}>*/}
                    {/*<View style={{display:"flex",flex:1,padding:"10rpx"}}>*/}
                      {/*<View style={{width:"160rpx",height:"40rpx",borderRadius:"20rpx",backgroundColor:"#ae5da0",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex"}}>*/}
                        {/*<Text style={{color: "#ffffff", fontSize: "22rpx"}}>状态</Text>*/}
                      {/*</View>*/}

                    {/*</View>*/}


                  {/*</View>*/}
                  {/*<View style={{display:"flex",flex:1}}>*/}
                    {/*<View style={{border:"1px solid #f0f2f5",borderRadius:"10rpx",padding:"10rpx",flex:1,height:"60rpx"}}>*/}
                      {/*222*/}
                    {/*</View>*/}
                  {/*</View>*/}
                  {/*<View style={{display:"flex",flex:1}}>*/}
                    {/*<View style={{height:"40rpx", alignItems: "center",*/}
                      {/*justifyContent: "center",display:"flex"}}>*/}
                      {/*<Text style={{color: "#999999", fontSize: "22rpx"}}>创建时间:xxxxxxx</Text>*/}
                    {/*</View>*/}


                  {/*</View>*/}
                  {/*<View style={{display:"flex",flex:1}}>*/}
                    {/*<View style={{display:"flex",flex:1,justifyContent:"flex-end"}}>*/}
                      {/*<View style={{width:"160rpx",height:"50rpx",borderRadius:"25rpx",backgroundColor:"#ae5da0",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",margin:"10rpx"}}>*/}
                        {/*<Text style={{color: "#ffffff", fontSize: "22rpx"}}>直流电压</Text>*/}
                      {/*</View>*/}
                      {/*<View style={{width:"160rpx",height:"50rpx",borderRadius:"25rpx",backgroundColor:"#ae5da0",  alignItems: "center",*/}
                        {/*justifyContent: "center",display:"flex",margin:"10rpx"}}>*/}
                        {/*<Text style={{color: "#ffffff", fontSize: "22rpx"}}>直流电压</Text>*/}
                      {/*</View>*/}
                    {/*</View>*/}


                  {/*</View>*/}
                {/*</View>*/}
              {/*</View>*/}

            </View>
          </ScrollView>

        <View style={{display:"flex",alignItems:"center",justifyContent:"center",background:"#ffffff",height:"120rpx",position:"fixed",bottom:"0",width:"100%",borderTop:"2rpx #f0f2f5 solid"}}>
          <View onClick={this.addDevice.bind(this)} style={{background:"#4bb33d",borderRadius:"10rpx",width:"80%",height:"70rpx",display:"flex",alignItems:"center",justifyContent:"center",}}>
            <Text style={{color:"#ffffff",fontSize:"26rpx"}}>
              添加设备
            </Text>

          </View>

        </View>
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,sys_config:state.sys_config,
    gytoken:state.gytoken
  }
}
export default connect(mapstate)(jz_device_list)

